<!-- 采购管理-采购任务列表 -->
<template>
  <pageHeader title="采购订单详情页" :breadCrumb="breadCrumb" :show-back="true">
    <template #footer>
      <a-button v-if="demand.info.state === 3" type="primary" @click="Submit">
        <template #default>提交</template>
      </a-button>
    </template>
    <div class="title">
      <h1>采购订单表</h1>
    </div>

    <div>
      <div style="display: flex">
        <div class="form-item">
          <div class="title-item">
            <a-space style="margin-left: 40px">
              <div
                style="
                  width: 5px;
                  height: 23px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              ></div>
              <div>基本信息</div></a-space
            >
          </div>
          <div class="demand-index">
            <a-form
              ref="form"
              :model="demand.info"
              autoLabelWidth
              :layout="(layout as Tlayout)"
            >
              <a-row :gutter="16">
                <a-col
                  v-for="item in demandForm?.info?.design?.form"
                  :key="item.id"
                  :span="item.span"
                >
                  <FormItem
                    :name="item.name"
                    :componentType="item.componentType"
                    v-model:props="item.props"
                    :required="item.required"
                    v-model:values="item.values"
                    :disabled="item.disabled"
                  />
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div class="title-item">
          <span style="padding-left: 40px"> 审核结果</span>
        </div>
        <div style="width: 95%; margin: 20px 40px">
          <a-space :size="40" direction="vertical" fill>
            <div
              ><span>是否通过审核：</span>
              <a-radio-group
                v-model="Process"
                size="large"
                :disabled="demand.info.state !== 3"
              >
                <a-radio
                  :value="1"
                  :style="{
                    marginRight: '20px',
                  }"
                >
                  <template #radio="{ checked }">
                    <div
                      :style="{
                        display: 'flex',
                        width: '135px',
                      }"
                      :class="checked ? 'checked-radio' : 'unchecked-radio'"
                    >
                      <div
                        :style="{
                          width: '35px',
                          textAlign: 'center',
                        }"
                        :class="
                          checked
                            ? 'radio-icon-box-checked'
                            : 'radio-icon-box-unchecked'
                        "
                      >
                        <icon-check-circle
                          :class="
                            checked
                              ? 'radio-icon-checked'
                              : 'radio-icon-unchecked'
                          "
                          class="radio-icon"
                          size="20px"
                        />
                      </div>
                      <div
                        :style="{
                          width: '100px',
                          textAlign: 'center',
                        }"
                      >
                        通过
                      </div>
                    </div>
                  </template>
                </a-radio>
                <a-radio :value="2">
                  <template #radio="{ checked }">
                    <div
                      :style="{
                        display: 'flex',
                        width: '135px',
                      }"
                      :class="checked ? 'checked-radio-no' : 'unchecked-radio'"
                    >
                      <div
                        :style="{
                          width: '35px',
                          textAlign: 'center',
                        }"
                        :class="
                          checked
                            ? 'radio-icon-box-checked-no'
                            : 'radio-icon-box-unchecked'
                        "
                      >
                        <icon-check-circle
                          :class="
                            checked
                              ? 'radio-icon-checked-no'
                              : 'radio-icon-unchecked'
                          "
                          class="radio-icon"
                          size="20px"
                        />
                      </div>
                      <div
                        :style="{
                          width: '100px',
                          textAlign: 'center',
                        }"
                      >
                        不通过
                      </div>
                    </div>
                  </template>
                </a-radio>
              </a-radio-group></div
            >
          </a-space>
        </div>
      </div>
    </div>
  </pageHeader>

  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 审核信息 </template>
    <div
      ><a-form :model="demand" auto-label-width>
        <a-form-item field="priority" label="优先级" required>
          <a-radio-group v-model="demand.info.priority">
            <a-radio :value="4">紧急</a-radio>
            <a-radio :value="3">高</a-radio>
            <a-radio :value="2">中</a-radio>
            <a-radio :value="1">低</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form></div
    >
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { Message } from '@arco-design/web-vue';
  import dayjs from 'dayjs';
  import {
    // postPurchaseApply,
    getSinglePurchaseOrder,
    putSinglePurchaseOrder,
  } from '@/api/buy-management/buy-order/index';
  import { getOpenTemp } from '@/api/buy-management/get-template/index';

  const router = useRouter();
  const route = useRoute();
  const breadCrumb: string[] = ['采购管理', '采购管理', '采购订单详情页'];
  const Process = ref(1);
  const layout = ref('vertical');
  type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;
  interface DemandType {
    info: {
      number: string; //采购订单单号
      name: string; //采购订单名称
      description: string; //秒速
      templateId: number; //模板id
      contractNumber: string; //合同编号
      supplierId: number; //供应商id
      priority: number; //优先级
      state: number; //状态
      salesman: number; //业务员
      totalPrice: number; //总金额
      orderProduct: any; //订单产品
      deliveryItem: any; //交货要求
      extend: string;
    };
  }
  const demand = reactive<DemandType>({
    info: {
      number: '',
      name: '',
      description: '',
      templateId: 0,
      contractNumber: '',
      supplierId: 0,
      priority: 0,
      state: 0,
      salesman: 0,
      totalPrice: 0,
      extend: '',
      orderProduct: [],
      deliveryItem: [],
    },
  });
  interface DemandFormType {
    info: {
      id: number;
      flowId: number;
      design: {
        form: any[];
      };
    };
  }
  const demandForm = reactive<DemandFormType>({
    info: { id: 0, flowId: 0, design: { form: [] } },
  });

  const getBuyInfo = async (id) => {
    const res = await getSinglePurchaseOrder({ id });
    demand.info = res;
    if (demand.info.state === 4) {
      Process.value = 1;
    } else if (demand.info.state === 5) {
      Process.value = 2;
    }
    demandForm.info.design.form = res.extends;
  };

  const getTemp = async () => {
    const res = await getSinglePurchaseOrder({ id: Number(route.query.id) });
    demand.info = res;
    if (demand.info.state === 4) {
      Process.value = 1;
    } else if (demand.info.state === 5) {
      Process.value = 2;
    }
    demandForm.info.design.form = res.extends;
    demandForm.info.design.form.forEach((item: any) => {
      item.disabled = true;
      if (typeof item.props === 'string') item.props = JSON.parse(item.props);
      if (
        item.values === '' ||
        item.values.length === 0 ||
        typeof item.values === 'string'
      ) {
        item.values = [];
        item.values[0] = demand.info[item.fieldName];
      }
      if (item.code === 'BUY-DETAILED') {
        item.props.data = demand.info.product ? demand.info.product : [];
      }
      if (item.code === 'FILE') {
        item.props.data = demand.info.file;
      }
    });
  };
  getTemp();

  const visible = ref(false);
  const keys = Object.keys(demand.info);

  const Submit = async () => {
    if (!Process.value) {
      Message.error('请选择审核结果');
      return;
    }
    if (Process.value === 1) {
      demand.info.state = 4;
    } else {
      demand.info.state = 5;
    }
    await putSinglePurchaseOrder(demand.info);
    router.back();
  };

  onMounted(() => {});
</script>

<style scoped lang="less">
  // .content-head {
  // }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }
  .demand-index {
    padding: 50px;
  }

  .unchecked-radio {
    background-color: #fff;
    color: #dcdfe6;
    border: 1px solid #dcdfe6;
    font-weight: 700;
    font-size: 16px;
  }
  .checked-radio {
    background-color: rgb(49, 194, 124);
    color: #fff;
    border: 1px solid rgb(49, 194, 124);
    font-weight: 700;
    font-size: 16px;
  }

  .checked-radio-no {
    background-color: rgb(255, 0, 0);
    color: #fff;
    border: 1px solid rgb(255, 0, 0);
    font-weight: 700;
    font-size: 16px;
  }
  .radio-icon-box-checked {
    border: 1px solid rgb(49, 194, 124);
    background-color: #fff;
  }
  .radio-icon-box-checked-no {
    border: 1px solid rgb(255, 0, 0);
    background-color: #fff;
  }
  .radio-icon-box-unchecked {
    border: 1px solid rgba(220, 223, 230, 1);
  }
  .radio-icon-checked {
    color: rgb(49, 194, 124);
  }

  .radio-icon-checked-no {
    color: rgb(255, 0, 0);
  }

  .radio-icon {
    position: relative;
    top: 3px;
  }

  .form-item {
    width: 100%;
  }
</style>
